<template>
  <view class="register">
    <view class="title">欢迎注册</view>
    <uni-forms class="form" ref="form" :modelValue="dataForm" :rules="rules" validate-trigger="bind"
               label-width="80px">
      <uni-forms-item name="userName" label="账号">
        <uni-easyinput type="text" v-model="dataForm.userName" placeholder="账号"/>
      </uni-forms-item>
      <uni-forms-item name="nickName" label="昵称">
        <uni-easyinput type="text" v-model="dataForm.nickName" placeholder="昵称"/>
      </uni-forms-item>

      <uni-forms-item label="性别:" name="sex">
        <radio-group @change="switchSex">
          <label class="radio">
            <radio color="#2782D7" value="0" :checked="dataForm.sex===0"/>
            男</label>
          <label class="radio" style="margin-left: 20rpx">
            <radio color="#F76260" value="1" :checked="dataForm.sex===1"/>
            女 </label>
        </radio-group>
      </uni-forms-item>

      <uni-forms-item name="age" label="年龄">
        <uni-easyinput v-model="dataForm.age" placeholder="年龄"/>
      </uni-forms-item>

      <uni-forms-item name="password" label="密码">
        <uni-easyinput type="password" v-model="dataForm.password" placeholder="密码"/>
      </uni-forms-item>

      <uni-forms-item name="confirmPassword" label="确认密码">
        <uni-easyinput type="password" v-model="dataForm.confirmPassword" placeholder="确认密码"/>
      </uni-forms-item>
      <view>
        <!--				<checkbox-group @change="onCheckChange">-->
        <!--					<checkbox value="agree" :checked="false">-->
        <!--						<text>我已阅读并同意-->
        <!--							<text class="protocol" @click="onShowProtocol()">《用户协议》</text>-->
        <!--							和-->
        <!--							<text class="protocol" @click="onShowPrivacy()">《隐私政策》</text>-->
        <!--						</text>-->
        <!--					</checkbox>-->
        <!--				</checkbox-group>-->
      </view>
      <button style="background: #2782D7" class="btn-submit" @click="submit" type="warn">注册并登陆</button>
    </uni-forms>
    <navigator class="nav-login" url="/pages/login/login">
      返回登陆页面
    </navigator>
  </view>
</template>

<script>
import UNI_APP from '@/.env.js';

export default {
  data() {
    return {
      isAgree: false,
      dataForm: {
        sex: 0,
        age: null,
        userName: '',
        nickName: '',
        password: '',
        confirmPassword: ''
      },
      rules: {
        userName: {
          rules: [{
            required: true,
            errorMessage: '请输入用户名',
          }]
        },
        nickName: {
          rules: [{
            required: true,
            errorMessage: '请输入昵称',
          }]
        },
        password: {
          rules: [{
            required: true,
            errorMessage: '请输入密码',
          }]
        },
        age: {
          rules: [{
            required: true,
            errorMessage: '请输入年龄',
          }, {
            validateFunction: function (rule, value, data, callback) {
              if (value > 0) {
                return true
              } else {
                callback('年龄必须是大于0的数字');
              }
              return true
            }
          }
          ]
        },
        confirmPassword: {
          rules: [{
            required: true,
            errorMessage: '请输入确认密码',
          }, {
            validateFunction: (rule, value, data, callback) => {
              if (data.password != value) {
                callback('两次密码输入不一致')
              }
              return true;
            }
          }]
        }
      }
    }
  },
  methods: {
    switchSex(e) {
      this.dataForm.sex = e.detail.value;

      console.log(this.dataForm.sex)

    },

    submit() {
      // if (!this.isAgree) {
      // 	uni.showToast({
      // 		title: "请勾选同意用户协议",
      // 		icon: "none"
      // 	})
      // 	return;
      // }

      this.$refs.form.validate().then(() => {
        this.$http({
          url: '/register',
          data: this.dataForm,
          method: 'POST'
        }).then(() => {
          uni.showToast({
            title: "注册成功",
            icon: 'none'
          })
          this.login();
        })
      })
    },
    onShowProtocol() {
      const linkUrl = encodeURIComponent(UNI_APP.PROTOCOL_URL);
      uni.navigateTo({
        url: '/pages/common/external-link?url=' + linkUrl
      });
    },
    onShowPrivacy() {
      const linkUrl = encodeURIComponent(UNI_APP.PRIVACY_URL);
      uni.navigateTo({
        url: '/pages/common/external-link?url=' + linkUrl
      });
    },
    onCheckChange(e) {
      this.isAgree = e.detail.value.includes("agree")
    },
    login() {
      const loginForm = {
        terminal: this.$enums.TERMINAL_TYPE.APP,
        userName: this.dataForm.userName,
        password: this.dataForm.password
      }
      this.$http({
        url: '/login',
        data: loginForm,
        method: 'POST'
      }).then((loginInfo) => {
        console.log("登录成功,自动跳转到聊天页面...")
        uni.setStorageSync("userName", loginForm.userName);
        uni.setStorageSync("password", loginForm.password);
        uni.setStorageSync("loginInfo", loginInfo);
        // 调用App.vue的初始化方法
        getApp().init()
        // 跳转到聊天页面
        uni.switchTab({
          url: "/pages/chat/chat"
        })
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.register {
  .title {
    padding-top: 150rpx;
    padding-bottom: 50rpx;
    color: royalblue;
    text-align: center;
    font-size: 60rpx;
    font-weight: 600;
  }

  .form {
    padding: 50rpx;

    .protocol {
      color: #007BFF;
    }

    .btn-submit {
      margin-top: 80rpx;
      border-radius: 50rpx;
    }
  }

  .nav-login {
    position: fixed;
    width: 100%;
    bottom: 100rpx;
    color: royalblue;
    text-align: center;
    font-size: 32rpx;
  }
}
</style>